<template>
  <li class="df-center" :class="{'drag-over': dragOver}" @drop.prevent.stop="onDrop" @dragover.prevent.stop="dragover" @dragleave.prevent.stop="dragleave">
    <i class="iconfont" :class="[info.isDirectory ? 'icon-folder' : 'icon-file cAAA']"></i>
    <span class="df1">{{info.name}}</span>
  </li>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  li {
    padding: 8px 10px;
    font-size: 14px;
    color: #444444;
    background-color: #ffffff;
    transition: all .2s ease-in;
    cursor: pointer;
    border-left: 3px solid transparent;
    i {
      padding-right: 10px;
      font-size: 18px;
      &.icon-folder {
        color: #ffc442;
      }
    }
    &:nth-child(2n) {
      background-color: #fafafa;
    }
    &:hover, &.drag-over {
      background-color: rgba(34, 215, 187, 0.1);
      border-color: $primary;
    }
    span {
      user-select: none;
    }
  }
</style>

<script type="text/babel">
  import drop from './dragMixin.js'

  export default {
    mixins: [drop],
    props: {
      info: [Object, String],
      path: String,
    },
    components: {},
    data() {
      return {
        dragOver: false
      }
    },
    watch: {},
    computed: {},
    methods: {
      onDrop (e) {
        let files = e.dataTransfer.files
        this.dropMultFiles(files, this.path + this.info.name)
      },
      dragover (e) {
        if (!this.info.isDirectory) {
          e.preventDefault()
          e.dataTransfer.effectAllowed = 'none'
          e.dataTransfer.dropEffect = 'none'

          return
        }

        this.dragOver = true

      },
      dragleave (e) {
        this.dragOver = false
      }
    },
    mounted() {
    },
  }
</script>

